<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw" style="height: 380px">
    <a-table :columns="columns" :data-source="data"  @change="onChange">
      <!-- 自定义表头 -->
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            <smile-outlined />
            {{column.title}}
          </span>
        </template>
      </template>

      <!-- 自定义单元格 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a>
            {{ record.name }}
          </a>
        </template>
        <template v-else-if="column.key === 'tags'">
          <span>
            <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a>Invite 一 {{ record.name }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link">
              More actions
              <down-outlined />
            </a>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { TableColumnType, TableProps } from 'ant-design-vue';
const columns:TableColumnType<UserInfo>[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    // 可选过滤值
    filters: [
      {text:'张三',value:'张三'},
      {text:'李四',value:'李四'},
      {text:'王五',value:'王五'}
    ],
    // 过滤回调方法
    onFilter: (value: string | number | boolean, record: UserInfo) => record.name.indexOf(value as string) === 0,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '标签',
    dataIndex: 'tags',
    key: 'tags',
  },
  {
    title: '动作',
    key: 'action',
  },
]
interface UserInfo {
  key: string
  name: string
  age: number
  address: string
  tags?: string[]
}
const data:UserInfo[] = [
  {
    key: '1',
    name: '张三',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: '李四',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: '王五',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

/**
 * 分页条件,过滤条件,排序条件发生改变时，会触发该事件
 * 
 * @param pagination 分页条件
 * @param filters 过滤条件
 * @param sorter 排序条件
 */
const onChange: TableProps<UserInfo>['onChange'] = (pagination, filters, sorter) => {
  console.log('onChange params', pagination, filters, sorter);
};
</script>
